<template>
  <!-- 上传图片 -->
  <van-uploader
    type="image"
    :accept="accept"
    multiple
    :after-read="afterRead"
    :before-read="beforeRead"
  >
    <van-button class="icons_button"><van-icon size="25" name="photo-o" /></van-button>
  </van-uploader>
  <div v-if="imgSrcs.length">
    <div v-for="(it, index) in imgSrcs" :key="index">
      <img :src="it" alt="Uploaded Image" style="max-width: 10%; margin-top: 20px" />
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, defineProps } from 'vue'
import { showToast } from 'vant'
import { chatListStore } from '@/stores/chatMsg'
const { addChat } = chatListStore()
defineProps({
  accept: {
    type: String,
    default: 'image/*',
  },
})
const beforeRead = (file) => {
  console.log(file, 890)
  // 如果是多张图片上传，file 会是一个数组
  if (Array.isArray(file)) {
    const isImg = file.every((item) => {
      item.type !== 'image/jpeg' &&
        item.type !== 'image/jpeg' &&
        item.type !== 'image/png' &&
        item.type !== 'image/gif' &&
        item.type !== 'image/bmp' &&
        item.type !== 'image/jpg'
    })
    if (isImg) {
      showToast('请上传图片格式')
      return false
    }
  } else {
    // 单个文件
    if (
      file.type !== 'image/jpeg' &&
      file.type !== 'image/jpeg' &&
      file.type !== 'image/png' &&
      file.type !== 'image/gif' &&
      file.type !== 'image/bmp' &&
      file.type !== 'image/jpg'
    ) {
      showToast('请上传图片格式')
      return false
    }
  }
  return true
}
const afterRead = (file) => {
  // file 是一个对象，包含文件信息
  console.log(file, 'file111')
  // 如果是多张图片上传，file 会是一个数组
  if (Array.isArray(file)) {
    file.forEach((item) => {
      handleFile(item)
    })
  } else {
    handleFile(file)
  }

  // setTimeout(() => {
  //   file.status = 'failed'
  //   file.message = '上传失败'
  // }, 1000)
}
const imgSrcs = ref([])
// 处理单个文件
const handleFile = (file) => {
  console.log(file, 'file444')
  // imgSrcs.value = [...imgSrcs.value, file.content]
  // console.log(imgSrcs.value, 'imgSrcs.value')
  // 添加用户消息到聊天列表
  addChat({
    role: 'user',
    imgurl: file.content,
  })

  // // 使用 FileReader 将文件转换为 Data URL
  // const reader = file.contentnew FileReader()
  // reader.onload = (e) => {
  //   console.log(e, 'e')
  //   const imageUrl = e.target?.result // 将 Data URL 赋值给 imageUrl
  //   // 添加用户消息到聊天列表
  //   addChat({
  //     role: 'user',
  //     imgurl: imageUrl,
  //   })
  // }
  // reader.readAsDataURL(file.file) // file.file 是实际的 File 对象
}
</script>
<style scoped lang='scss'>
.icons_button {
  // margin-bottom: 5px;
  width: 35px;
  height: 35px;
  background-color: #eee;
  margin-right: 5px;
}
</style>